<template>
  <div>
    <common-head title="商品列表"/>
    <div class="item-nav">
      <div :class="['sale',{active:order_by.sale!==-1}]" @click="bySale">
        <span>销量</span>
        <div :class="['angle-down',{active:order_by.sale===1}]"></div>
        <div :class="['angle-up',{active:order_by.sale===0}]"></div>
      </div>
      <div :class="['price',{active:order_by.price!==-1}]" @click="byPrice">
        <span>价格</span>
        <div :class="['angle-down',{active:order_by.price===0}]"></div>
        <div :class="['angle-up',{active:order_by.price===1}]"></div>
      </div>
    </div>
    <div class="item-main">
      <div class="item"  v-for="item in floors" :key="item.id" @click="enterDetail(item.id)">
        <img :src="item.pic" alt="">
        <h5 class="item-title">
          {{item.name}}
        </h5>
        <div class="price">
          <span class="discount-price">{{item.minPrice | currency}}</span>
          <span class="original-price">{{item.originalPrice | currency}}</span>
          <van-icon class-prefix="icon" color="#f66" size="18" class="iconfont" name="wuuiconxiangjifangda"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { fetchItems } from '@api'
import { currency } from '../../utils/filters'
export default {
  data () {
    return {
      floors: [],
      orderBy: 'ordersDown',
      order_by: {
        sale: 0, // sale 0 默认是 销量降序  1 销量 升序  -1（价格排序）
        price: -1 // price 0 价格升序 1 价格降序  -1  销量排序
      }
    }
  },
  created () {
    this.fetchItem()
  },
  methods: {
    enterDetail (id) {
      // 进入详情页
      this.$router.push(`/detail/${id}`)
    },
    bySale () {
      // 按照销量排序
      // 取消price
      this.order_by.price = -1
      if (this.order_by.sale === -1) {
        this.order_by.sale = 0
        // 销量降序
        this.orderBy = 'ordersDown'
      } else if (this.order_by.sale === 0) {
        this.order_by.sale = 1
        this.orderBy = 'ordersUp'
      } else {
        this.order_by.sale = 0
        this.orderBy = 'ordersDown'
      }
      // 重新调用 数据请求函数
      this.fetchItem()
    },
    byPrice () {
      this.order_by.sale = -1
      if (this.order_by.price === -1) {
        this.order_by.price = 0
        this.orderBy = 'priceUp'
      } else if (this.order_by.price === 0) {
        this.order_by.price = 1
        this.orderBy = 'priceDown'
      } else {
        this.order_by.price = 0
        this.orderBy = 'priceUp'
      }
      // 重新调用 数据请求函数
      this.fetchItem()
    },
    fetchItem () {
      const params = {
        orderBy: this.orderBy,
        categoryId: this.$route.params.cateId
      }
      fetchItems(params).then(res => {
        if (res.data.code === 0) {
          this.floors = res.data.data
        }
      })
    }
  },
  filters: {
    currency
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.item-nav{
  position: fixed;
  left:0;
  top:46px;
  height:40px;
  width:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size:14px;
  color:#666;
  background: #f2f2f2;
  .sale{
    &.active{
      color:#f66;
    }
    position: relative;
    .angle-down{
      width:0;
      height:0;
      border:6px solid transparent;
      border-bottom-color:#aaa;
      position: absolute;
      right:-18px;
      top:-4px;
      &.active{
         border-bottom-color:#f66;
      }
    }
    .angle-up{
      width:0;
      height:0;
      border:6px solid transparent;
      border-top-color:#aaa;
      position: absolute;
      right:-18px;
      bottom:-6px;
      &.active{
         border-top-color:#f66;
      }
    }
  }
  .price{
    position: relative;
    &.active{
         color:#f66;
      }
    .angle-down{
      width:0;
      height:0;
      border:6px solid transparent;
      border-bottom-color:#aaa;
      position: absolute;
      right:-18px;
      top:-4px;
      &.active{
         border-bottom-color:#f66;
      }
    }
    .angle-up{
      width:0;
      height:0;
      border:6px solid transparent;
      border-top-color:#aaa;
      position: absolute;
      right:-18px;
      bottom:-6px;
      &.active{
         border-top-color:#f66;
      }
    }
  }
}

.item-main{
    display:flex;
     margin-top:86px;
    flex-wrap:wrap;
    .item{
      width:50%;
      padding:0 10px;
      box-sizing: border-box;
      img{
        width:100%;
      }
      &-title{
        font-size:14px;
        color:#333;
        line-height:20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price{
        height:30px;
        display: flex;
        align-items: center;
        .discount-price{
          font-size:24px;
          color:#f66;
        }
        .original-price{
          font-size:16px;
          margin: 0 10px;
          color:#999;
          text-decoration: line-through;
        }
      }
    }
  }
</style>
